<template>
    <div class="plice-list">
        <div class="time">
            <p>{{lis.tm}}</p>
            <span>{{timeover}}</span>
        </div>
        <div class="type">
            <p>
                <span>{{lis.lang}}</span>
                <span>{{lis.tp}}</span>
            </p>
            <div class="th">
                {{lis.th}}
            </div>
        </div>
        <div class="plice">
            <div class="pl">
                <div class="bs">
                    <span>￥</span>
                    <span class="bp">{{lis.baseSellPrice}}</span>
                </div>
                <div class="vp">
                    <i class="pn">{{lis.vipPriceName}}</i>
                    <i class="vip">￥{{lis.vipPrice}}</i>
                </div>
            </div>
            <div class="extraDesc">{{lis.extraDesc}}</div>
        </div>
        <div :class="['btn',lis.forbiddenTip.length>0?'disable':'']" @click.stop="buy">
            <span v-if="lis.forbiddenTip.length>0">停售</span>
            <router-link  v-else :to="{
                name:`Buyticket`,
                params:{
                    cinema,
                    lis,
                    movie,
                }
            }">
                <span>购票</span>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        lis:Object,
        dur:Number,
        cinema:Object,
        movie:Object
    },
    methods:{
        buy(){
            if(this.lis.forbiddenTip.length>0){
                this.$toast({
                    message:this.lis.forbiddenTip,
                    duration:1500,
                    icon:'info-o',
                });
            }
        }
    },
    computed:{
        timeover(){
            let time=this.lis.tm;
            let h=Number(time.split(':')[0]);
            let s=Number(time.split(':')[1]);
            let th=parseInt(this.dur/60);
            let ts=this.dur-(th*60);
            let sumSec=s+ts;
            let sumHours=h+th;
            if(sumSec>=60){
                sumSec=sumSec-60;
                sumHours+=1;
                if(sumHours>=24){
                    sumHours=sumHours-24;
                }
            }
            sumSec=sumSec>9?sumSec:'0'+sumSec;
            sumHours=sumHours>9?sumHours:'0'+sumHours;
            return sumHours+':'+sumSec+'散场';
        }
    },
}
</script>

<style lang="less" scoped>
.plice-list{
    padding: 17px 12.5px;
    position: relative;
    display: flex;
    align-items: center;

    &::after{
        content: "";
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid #eee;
    }

    .time{
        p{
            padding-bottom: 5px;
            font-size: 20px;
            color: #333;
        }
        span{
            font-size: 12px;
            color: #999;
        }
    }

    .type{
        flex: 1;
        margin-left: 17px;

        p{
            font-size: 13px;
            color: #333;
        }

        .th{
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }
    }

    .plice{
        width: 130px;

        .pl{
            display: flex;
            align-items: flex-end;

            .bs{
                color: #f03d37;
                font-size: 12px;

                .bp{
                    font-size: 19px;
                }
            }

            .vp{
                font-size: 12px;
                margin-left: 3px;
                color: #f90;
                line-height: 15px;

                i{
                    display: inline-block;
                    transform: scale(.8);
                }

                .pn{
                    color: #fff;
                    background-color: #f90;
                    padding: 2px 3px;
                    border-radius: 2px 0 0 2px;
                }

                .vip{
                    margin-left: -9px;
                    padding: 2px 3px;
                    border: 1px solid #f90;
                    line-height: 13px;
                    border-radius: 0 2px 2px 0;
                    margin-top: 1px;
                }
            }
        }

        .extraDesc{
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
    }

    .btn{
        width: 45px;
        line-height: 25px;
        text-align: center;
        border-radius: 25px;
        border: 1px solid #f06762;
        color: #f03d37;
        font-size: 12px;
        margin-left: 2px;

        a{
            span{
               color: #f03d37; 
            }
        }

        &.disable{
            color: #ccc;
            border-color: #e8e8e8;
        }
    }
}
</style>